import React, { Component } from 'react'
import { Switch, Route, withRouter } from 'react-router-dom'
import PrivteRoute from '@/components/PrivteRoute'
import { TransitionGroup, CSSTransition } from 'react-transition-group'
import PageFooter from './components/PageFooter'

// 渲染的组件
import Home from './views/Home'
import Category from './views/Category'
import CookMap from './views/CookMap'
import Center from './views/Center'
import Detail from './views/Detail'
import Login from './views/Login'
import Fav from './views/Fav'
import Record from './views/Record'

import './style/common.scss'
import * as types from '@/typings/commonType'

import { connect } from 'react-redux'

@withRouter
// @connect(state => state.get('common').toJS(), {
//   setShowPageFooter(show = false) {
//     return { type: types.COMMON_SHOWPAGEFOOTER, payload: show }
//   }
// })
class App extends Component {
  // state = {
  //   showPageFooter: true
  // }
  render() {
    return (
      <>
        <main className="main-container">
          <TransitionGroup>
            <CSSTransition
              key={this.props.location.key}
              timeout={600}
              classNames="router"
            >
              <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/category" component={Category} />
                <Route path="/map" component={CookMap} />
                <Route path="/center" render={router => {
                  this.props.setShowPageFooter(true)
                  return <Center {...router} />
                }} />
                <Route path="/detail/:id" component={Detail} />
                <PrivteRoute path="/fav" component={Fav} />
                <PrivteRoute path="/login" component={Login} />
                <PrivteRoute path="/record" component={Record} />
              </Switch>
            </CSSTransition>
          </TransitionGroup>
        </main>
        <PageFooter show={this.props.showPageFooter} />
      </>
    )
  }
}

export default App
